<template>
  <div class="home container">
    <div class="controlbox">
      <el-tooltip class="item" effect="dark" content="点击进行定位" placement="left-start">
        <i class="el-icon-map-location" style="color:blue; margin-top: 10px;" @click="drawLine"></i>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="开始修改图层" placement="left-start">
        <i class="el-icon-edit" style="color:blue;margin-top: 10px;" @click="startModify('json')"></i>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="开始修改围栏" placement="left-start">
        <i class="el-icon-edit" style="color:blue;margin-top: 10px;" @click="startModify('polygon')"></i>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="停止修改" placement="left-start">
        <i class="el-icon-video-pause" style="color:yellowgreen;margin-top: 10px;" @click="endModify"></i>
      </el-tooltip>
    </div>
    <div id="map" class="map-container" :style="{'width':mapWidth,'height':mapHeight}"></div>
    <el-tooltip class="item" effect="light" placement="left">
    <div slot="content">
      <div class="mapbox">
        <li @click="mapChangeType(0)" :class="models.active[0]?'activeStyle':''">
          <img src="../assets/image/dixing.jpg" width="100px" height="50px">
          <div class="on">地形地图</div>
        </li>
        <li @click="mapChangeType(1)" :class="models.active[1]?'activeStyle':''">
          <img src="../assets/image/yingxiang.jpg" width="100px" height="50px">
          <div class="on">影像地图</div>
        </li>
      </div>
    </div>
    <div class="map0"></div>
  </el-tooltip>
  </div>
</template>
<script lang="ts">
import { Map, View } from "ol";
import { FullScreen } from "ol/control";
import { Vector as VectorSource } from "ol/source";
import { Tile as TileLayer} from "ol/layer";
import { Vector as VectorLayer } from "ol/layer";
import { XYZ} from "ol/source";
import { Component, Vue,Prop,Watch} from 'vue-property-decorator';
import GeoJSON from "ol/format/GeoJSON";
import Draw from 'ol/interaction/Draw';
import Modify from 'ol/interaction/Modify'
import {uploadJsonAsFile} from '@/utils/axios';
import * as turf from '@turf/turf';
@Component({})
export default class OlMap extends Vue {

@Prop() private mapWidth!: string;
@Prop() private mapHeight!: string;
@Prop() private vectorId!: string;

models: any = {
  resourceUrl: '/resources/file/',
  tempSource: null,
  map: null,
  geoJsonSource: null,
  polygonSource: null,
  drawGeoJson: '',
  active: [true, false],
  modify: null
}

originLayers = [
  {
    visible: true,
    urlPattern: "https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}"
  },
  {
    visible: false,
    urlPattern: "https://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}"
  }
];

get baseUrl() {
  return `${process.env.VUE_APP_DISK}${process.env.VUE_APP_BASE_API}${this.models.resourceUrl}`;
}

createBaseLayers() {
  const layers: any = [];
  this.originLayers.forEach(l => {
    layers.push(
      new TileLayer({
        source: new XYZ({
          url: l.urlPattern
        }),
        visible: l.visible
      })
    )
  });
  return layers;
}


initMap() {
  this.models.map = new Map({
    target: "map",
    controls: [new FullScreen()],
    layers: 
      this.createBaseLayers(),
    
    view: new View({
      // 将呼市作为地图中心
      center: [111.670801, 40.818311],
      zoom: 8,
      projection: "EPSG:4326",
    }),
  });
}


outputJson() {
  let features = this.models.geoJsonSource.getFeatures();
  let jsonObj = new GeoJSON().writeFeatures(features);
  uploadJsonAsFile(jsonObj).then((res: any) => {
    this.models.drawGeoJson = res.data.id;
  })
}

mapChangeType(x: any) {

  const layers = this.models.map.getLayers();
  if(!layers){
    return;
  }
  const layerLength = layers.values_.length;

  if( layerLength>= this.models.active.length){
    this.buildActivueStatus(x);
    this.models.active.forEach((val:any,idx:any) =>{
      const layer = layers.array_[idx]
      layer.setVisible(val);
    })
  }
}
buildActivueStatus(index: any) {
  this.models.active.forEach((it, idx) =>{
    this.models.active[idx] = false;
  });
  this.models.active[index] = true; // 设置激活的键为 true
  console.log(this.models.active)
}

startModify(type: any) {

  switch (type) {
    case 'json':
      this.models.modify = new Modify({
        source: this.models.geoJsonSource,
      });
      break;
  }
  this.models.map.addInteraction(this.models.modify);
}

endModify() {
  if (this.models.modify !== null) {
    this.models.map.removeInteraction(this.models.modify);
  }
  this.outputJson();
}

loadGeoJson(newValue) {
  const val = newValue || this.vectorId;
  if (val) {

    this.models.geoJsonSource = new VectorSource({
      url: this.baseUrl + val,
      format: new GeoJSON()
    });

    const geoJsonLayer = new VectorLayer({ source: this.models.geoJsonSource });
    if (this.models.geoJsonSource) {
      this.models.map.addLayer(geoJsonLayer);
    }
  }
}

drawLine() {

  const drawControl = new Draw({
    source: new VectorSource(),
    type: 'LineString'
  });

  this.models.map.addInteraction(drawControl);

  drawControl.on('drawend', (e) => {
    const splitLine = e.feature.getGeometry();

    this.performCutWithTurf(splitLine);

  });

}

 splitWithTurf(polygon, line) {
  // 步骤 1：计算线与多边形的交点

  debugger
  const intersections = turf.intersect(polygon, line);
 
 console.log(intersections)
  return null // 返回切割后的碎片数组
}

// 核心分割逻辑
 performCutWithTurf(cutLine) {

  const originalFeature = this.models.geoJsonSource.getFeatures()[0];
  let originalGeojson:any = originalFeature.getGeometry()
  const polygon = turf.polygon(originalGeojson.getCoordinates())

  console.log(polygon)
  // 执行分割
  const fragments = this.splitWithTurf(polygon, cutLine);

  // 清空原图层并添加碎片
  console.log(fragments)
}
@Watch('vectorId')
updateVectore(val: any) {
  if (this.models.geoJsonSource) {
     this.models.geoJsonSource = null;
     this.models.geoJsonSource.clear();
  }
  if (val) {
    this.loadGeoJson(val);
  }
}

mounted() {
  this.initMap();
}
}
</script>
<style>
.map0 {
  opacity:0.8;
  width: 24px;
  height: 24px;
  background: url(../assets/image/tooltip.png) center center no-repeat;
  background-size: 16px 16px;
  position: absolute;
  right: 60px;
  top: 10px;
  z-index: 200;
  cursor: pointer;
}
.map1 {
  opacity:0.5;
  width: 250px;
  height: 40px;
  background: #000 center center no-repeat;
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 200;
  cursor: pointer;
}

.mapbox {
  width: 220px;
  height: 60px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

.mapbox li {
  width: 100px;
  height: 50px;
  margin: 5px 0;
  display: block;
  position: relative;
  cursor: pointer;
}

.mapbox li .on {
  height: 16px;
  width: 100px;
  background-color: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 12px;
  position: absolute;
  bottom: 0;
  left: 0;
  display: none;
  text-align: center;
}
.mapbox li:hover .on{ display: block;}
.activeStyle {
  width: 100px;
  height: 50px;
  border: 1px solid #f00;
}
.container {
  border: 1px solid #42B983;
  position: relative;
  min-width: 100vh;
}

.controlbox {
  opacity:0.8;
  position: absolute;
  z-index: 10000;
  bottom: 200px;
  width: 18px;
  padding: 5px 7px;
  height: 200px;
  right: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-content: space-between;
  flex-direction: column;
  background-color: #fff;
}

.getlength0 {
  width: 18px;
  height: 30px;
  background: url(../assets/image/getnlength.png) center center no-repeat;
  background-size: 16px 16px;
}

.getarea0 {
  width: 18px;
  height: 30px;
  background: url(../assets/image/getarea.png) center center no-repeat;
  background-size: 16px 16px;
}

</style>
